<template>
  <div id="mainportal" class="container" style="background-color: #fff;">

  <comhead :title="$route.query.catname" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   


<div v-if="categoryList.length>1">
<div  style="z-index:10;height:49px;overflow: hidden;box-sizing:border-box;border-top: solid 1px #e5e5e5;display:flex;
align-items: center;font-size:14px;background-color:#F6F6F6;border-bottom:solid 1px #e5e5e5;     position: fixed;width:100%"
 @click='changeModel'>
  <div style='color:#999999;margin-left:10px;'>已选：</div>
  <div class="scroll_box">


    <div   style="width: auto;overflow:hidden;font-size:14px;" bindscroll="scrollLan">
      <div v-for="(item,index) in selectList" class='selectItem' :style="selectList.length>1&&index===0?'display:none':''" >
        <div style="width:100%;height:100%;display:flex;align-items:center;justify-content: center;" >
          {{item.catName}}
        </div>
      </div>
    </div>


  </div>
  <!-- position: fixed;right: 0;top: 0; -->
  <div style="font-size:14px;padding:0 10px;height:100%;display:flex;justify-content:center;
  align-items:center;background-color:#fff; box-shadow:1px 0px 15px #888888;z-index:100;">
    <!-- <image src="../../image/shaixuan1.png" ></image> -->
             <div> 
                 <i class="iconfont icon-shaixuan1" :style="'color:'+$store.getters.getMerchant.themeColors" style='width:12px;height:12px;margin:0 2px;'></i></div>
                <div>筛选</div>
                </div>
</div>


</div>


<div  style=' height: 100vh;width: 100%;'>
<div style='height:52px;' v-if="categoryList.length>1"></div>
<!-- <div style='height:49px;' ></div> -->
  
<!-- data-id='{{item.goodsId}}' -->
<!-- mode='aspectFit' -->
<div v-for="(item,index) in productList" class='proBox' @click='goDatil(item.goodsId,index, item.pic)' >
  <img :src="item.logoUrl"  style='width:90px;height:90px;'/>
  <div style='margin-left:15px;display:flex;align-items: center;'>
<div>
    <div>{{item.goodsName}}<span v-if="item.goodsModelNumber!=''||item.goodsModelNumber">({{item.goodsModelNumber}})</span></div>
    <div style='color:#ca0929;' v-if="$store.getters.getMerchant.basicMall  || item.priceShowStatus">
      <span style='font-size:14px;' v-if="item.memberPrice">￥</span>
      <span style='font-size:14px;' v-if="item.memberPrice">{{item.memberPrice}}</span>
    </div>
</div>
  </div>

</div>
</div>





<div :class="screenModel ?'openScreen':'closeScreen'" style='  z-index: 11;background-color: rgba(0, 0, 0, 0.498039);height: 100%;width: 100%;' @click='changeModel'>
  <div style='border-top:1px solid #e5e5e5; background-color:#fff;height:100vh;width:70%;' :class=" screenModel ?'modiaBoxUp':'modiaBoxDown'" @click.stop='retBox'>

    <div style='padding:0 10px;  display: flex;flex-wrap: wrap;justify-content: space-between;'>


      <div v-for="item in categoryList" @click.stop='selectItem(item)'  style='width:50%;'>
        <div :class="item.catKey?'select_bg_name':'bg_name'" style="height:44px;padding:0 8px;box-sizing: border-box;text-align:center; " :style="item.catKey?'  border: solid 1px '+ $store.getters.getMerchant.themeColors+'; color:'+$store.getters.getMerchant.themeColors:''">
          <div class='lineTwo' style='line-height:16px;'>
            {{item.catName}}
          </div>
                <i class="iconfont icon-xuanzhong" v-if="item.catKey" :style="'color:'+$store.getters.getMerchant.themeColors" style='width:15px;height:15px;position:absolute;bottom:1px;right:0;'></i>

          <!-- <image src='../../image/xuanzhong.png' ></image> -->

        </div>

      </div>



    </div>


  </div>


</div>







  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      productList: [],
      carId: "", //车型ID
      catId: "", //分类ID
      secCatId: "", //二级分类ID
      levelNum: "1",
      screenModel: false,
      categoryList: [],
      selectList: [
        {
          catName: "全部"
        }
      ],
      icon:'',
      picIcon: ''
    };
  },
  computed: {},

  methods: {
    retBox() {
      return;
    },
    removeByValue(arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
    },
    selectItem(e) {
      let list = this.categoryList;
      let selectList = this.selectList;
      let opt = this.secCatId.split(",");

      if (e.catKey) {
        this.removeByValue(selectList, e);
        this.removeByValue(opt, e.catId);
        let send = [];
        selectList.forEach((item, index) => {
          if (item.catId !== e.catId) {
            send.push(item);
          }
        });
        selectList = send;
        list.forEach((item, index) => {
          if (item.catId === e.catId) {
            item.catKey = false;
          }
        });
      } else {
        opt = [];
        list.forEach((item, index) => {
          if (item.catId === e.catId) {
            selectList.push(e);
            item.catKey = true;
          }
          if (item.catKey) {
            opt.push(item.catId);
          }
        });
      }
      (this.categoryList = list),
        (this.selectList = selectList),
        (this.secCatId = opt.join(","));

      this.getProductList();
      // this.changeModel()
    },

    changeModel(e) {
      this.screenModel = !this.screenModel;
    },
    goDatil(e, index,pic) {
    	this.icon = pic
      if (this.$route.query.OemNumber) {

        let storage = window.localStorage;
        console.log(storage)
        let modelOem =storage.modelOem? JSON.parse(storage.modelOem):[]
        let a = {
          createTime: new Date(),
          goodsId: this.productList[index].goodsId,
          oem: this.oem,
          goodsName: this.productList[index].goodsName,
          goodsModelNumber: this.productList[index].goodsModelNumber,
          logoUrl: this.productList[index].logoUrl,
          oemCode: this.productList[index].oemCode
        };

        modelOem.forEach((model, modelIndex) => {
          if (model.goodsId == a.goodsId) {
            this.removeByValue(modelOem, model);
          }
        });
        if (modelOem.length > 30) {
          this.removeByValue(modelOem, modelOem[modelOem.length - 1]);
        }
        modelOem.unshift(a);
        storage.modelOem = JSON.stringify(modelOem);
      }

      this.$router.push("/liDetail?id=" + e + "&carId=" + this.carId+"&icon="+this.picIcon);
    },
    //  二级分类列表
    getSecCatList(secCatId) {
      let self = this;
      let url = this.$baseUrl.sizUrl + "/merchant/catlist";
      let data = {};
      if (this.catId != "") {
        data = {
          merchantId: this.$store.getters.getMerchant.merchantId,
          modelId: this.carId,
          parentId: this.catId
        };
      } else {
        data = {
          merchantId: this.$store.getters.getMerchant.merchantId,
          modelId: this.carId
        };
      }
      console.log(data, "data");
      //发起网络请求
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.status != 200) {
          console.log("请求数据错误");
          return;
        }
        if (res.status === 200) {
          console.log(1, res);
          this.categoryList = res.data.data.children;
          let list = this.categoryList;
          let selectList = this.selectList;
          let secCatIdList = [];
          if (this.secCatId != "") {
            secCatIdList = this.secCatId.split(",");
          }

          list.forEach((item, index) => {
            if (item.catId === secCatId) {
              selectList.push(list[index]);
              item.catKey = true;
            }
            if (item.catKey) {
              secCatIdList.push(item.catId);
            }
          });

          (this.categoryList = list),
            (this.selectList = selectList),
            (this.secCatId = secCatIdList.join(","));

          this.getProductList();
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    // 商品列表
    getProductList() {
      console.log("商品列表");
      let self = this;
      let url = this.$baseUrl.bizUrl + "/goods/front/list";
      let data = {};
      if (!this.$store.getters.getLoginStatus.userId) {
        data = {
          merchantId: this.$store.getters.getMerchant.merchantId,
          firstCatId: this.catId, //一级分类id
          secCatIds: this.secCatId, //二级分类id
          carId: this.carId
        };
      } else {
        data = {
          merchantId: this.$store.getters.getMerchant.merchantId,
          userId: this.$store.getters.getLoginStatus.userId,
          firstCatId: this.catId, //一级分类id
          secCatIds: this.secCatId, //二级分类id
          carId: this.carId
        };
      }

      const querystring = require("querystring");
      //发起网络请求
      let callBack = res => {
        console.log(111, res);
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.status != 200) {
          console.log("请求数据错误");
          return;
        }
        if (res.status === 200) {
          console.log("商品列表", res.data);
          let productImage = [];
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].imageList.split(",").length > 0) {
              productImage.push(res.data.data[i].imageList.split(",")[0]);
            } else {
              productImage.push("");
            }
          }
          console.log(res.data.data.length);
          this.productImage = productImage;
          this.productList = res.data.data;
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    },
    getOemList() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/goods/search";
      let data = {
        merchantId: this.$store.getters.getMerchant.merchantId,
        oem: this.$route.query.OemNumber
      };
      let callBack = res => {
        Indicator.close();

        if (res == null) {
          console.log("网络请求错误！");
          return;
        }
        if (res.data.status != 200) {
          console.log("请求数据错误11");
          return;
        }

        console.log(res.data.data);

        // this.returnMessage= "匹配到以下结果，请选择查看"
        this.productList = res.data.data;
        // this.queryModel= !this.queryModel
      };
      this.$reqFormPost(url, data, callBack);
    }
  },
  mounted() {
        document.title = '商品列表'

    if (this.$route.query.OemNumber) {
      this.getOemList();
    } else {
      this.carId = this.$route.query.id;
      this.catId = this.$route.query.catid;
      this.picIcon = this.$route.query.icon
      this.secCatId =
        this.$route.query.levelNum === 2 ? this.$route.query.catid : "";
      this.levelNum = this.$route.query.levelNum;
      this.getSecCatList(this.$route.query.secCatId || "");
    }
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.proBox {
  border-bottom: solid 1px #e5e5e5;
  display: flex;
  font-size: 14px;
  padding: 10px 0;
  margin-left: 20px;
}
.scroll_box {
  flex: 1;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.selectItem {
  border-radius: 5px;
  padding: 0 5px;
  height: auto;
  margin-right: 11px;
  display: inline-block;
  background-color: #fff;
  border: #e5e5e5 solid 1px;
}
.closeScreen {
  position: fixed;
  bottom: -100%;
  z-index: 999;
  animation: myfirst2 0.5s;
}

@keyframes myfirst2 {
  from {
    display: flex;
  }

  to {
    display: none;
  }
}

.openScreen {
  border-top: solid 1px #e5e5e5;
  z-index: 999;
  display: flex;
  position: fixed;
  bottom: 0;
}

.select_bg_name {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 14px;
  border-radius: 7px;

  margin: 15px 10px;
  background-color: #fff;
  position: relative;
}
.lineTwo {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bg_name {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #e5e5e5;
  font-size: 14px;
  border-radius: 7px;

  margin: 15px 10px;
  background-color: #f5f5f5;
}
.comfire {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: #ca0929;
  color: #fff;
  text-align: center;
  font-size: 14px;
}
.modiaBoxUp {
  z-index: 999;
  position: fixed;
  right: 0;
  animation: myfirst 0.5s;
  top: 0;
}

@keyframes myfirst {
  from {
    right: -100%;
  }

  to {
    right: 0%;
  }
}

.modiaBoxDown {
  position: fixed;
  top: 0;
  right: -100%;
  animation: myfirst1 0.5s;
}

@keyframes myfirst1 {
  from {
    right: 0;
  }

  to {
    right: -100%;
    display: none;
  }
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
